<template>
  <el-card class="box-card" style="margin-right: 20px;margin-left: 20px; ">
    <div style="text-align: right;">
      <div>
        <!-- <el-button type="text" @click="dialogFormVisible = true"
          >出售商品</el-button
        > -->
        <div style="text-align: left;">
          <el-dialog title="出售商品信息" :visible.sync="dialogFormVisible">
            <el-form :model="goodsForm" :rules="rules">
              <el-form-item
                label="商品名称"
                :label-width="formLabelWidth"
                prop="gname"
                :rules="rules.gname"
              >
                <el-input
                  v-model="goodsForm.gname"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="出售人名字"
                :label-width="formLabelWidth"
                prop="seller"
                :rules="rules.seller"
              >
                <el-input
                  v-model="goodsForm.seller"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="商品价格"
                :label-width="formLabelWidth"
                prop="gprice"
                :rules="rules.gprice"
              >
                <el-input
                  v-model="goodsForm.gprice"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="商品描述"
                :label-width="formLabelWidth"
                prop="ginformation"
                :rules="rules.ginformation"
              >
                <el-input
                  type="textarea"
                  v-model="goodsForm.ginformation"
                ></el-input>
              </el-form-item>

              <el-form-item label="上传相关图片" :label-width="formLabelWidth">
                <div>
                  <el-upload
                    action="http://localhost:8888/imageLoad"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handle_success"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="50%" :src="dialogImageUrl" alt="插入图片" />
                  </el-dialog>
                </div>
              </el-form-item>

              <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
					      <el-select v-model="form.region" placeholder="请选择活动区域">
					        <el-option label="区域一" value="shanghai"></el-option>
					        <el-option label="区域二" value="beijing"></el-option>
					      </el-select>
					    </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="send">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>

    <div v-if="list[0] == null">
      <el-empty description="背包为空"></el-empty>
    </div>
    <el-row :gutter="20">
      <div v-for="(list, index) in list" :key="index">
        <el-col :span="8" class="animated fadeInUp">
          <div style="margin: 5px;">
            <el-card class="box-card card">
              <el-popover placement="bottom" width="300" trigger="hover">
                <div>
                  <div style="text-align:center;"><h6>商品信息</h6></div>
                  <div style="margin-top:10px;">
                    <font size="3" 
                      ><b>联系人：{{ list.seller }}</b></font
                    >
                  </div>
                  <div style="margin-top:10px;">
                    <font size="3" 
                      ><b>价格：{{ list.gprice }}</b></font
                    >
                  </div>
                  <div style="margin-top:10px;">
                    <font size="3" 
                      ><b>商品信息：{{ list.ginformation }}</b></font
                    >
                  </div>
                  <div style="text-align: right; margin-top: 30px">
                    <font size="1">{{ list.gtime }}</font>
                  </div>
                </div>
                <el-image
                  slot="reference"
                  :src="list.gurl"
                  style="width: 260px; height: 170px;"
                ></el-image>
              </el-popover>
              <div>{{ list.gname }}</div>
              <div style="text-align: right; margin: 10px;position:relative">
                <el-button
                  type="text"
                  @click="del(list.gno)"
                  style="position:absolute;right:-25px;bottom:-25px;"
                  title="移出背包"
                  ><i
                    class="iconfont icon-jianshao jia"
                    style="font-size:25px"
                  ></i
                ></el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      time: "2021年12月12日",
      list: [
        {
          gno: 1,
          gname: "书本",
          seller: "谭繁荣",
          gprice: 10.2,
          ginformation: "算法导论",
          gurl: "",
          gtime: "",
        },
      ],
      dialogFormVisible: false,
      goodsForm: {
        gname: "",
        seller: "",
        gprice: null,
        ginformation: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      file: "",
      filelist: [
        {
          url: "",
        },
      ],
      rules: {
        gname: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        seller: [
          { required: true, message: "请输入个人信息", trigger: "blur" },
        ],
        gprice: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        ginformation: [{ required: false, message: "", trigger: "" }],
      },
    };
  },
  created() {
    this.getbag();
  },
  methods: {
    getbag() {
      let id = window.sessionStorage.getItem("tokenid");
      this.$http
        .post("http://localhost:8888/findBag", { sid: id })
        .then((res) => {
          this.list = res.data;
          console.log(res);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      fileList.add(file);
      console.log(file, fileList);
      this.$message.success("图片删除");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handle_success(res) {
      this.$message.success("图片上传成功");
      this.file = res;
    },
    send() {
      if (
        this.goodsForm.gname == null ||
        this.goodsForm.gprice == null ||
        this.goodsForm.seller == null
      ) {
        this.$message.error("请按要求填写表单");
      } else {
        this.$http
          .post("http://localhost:8888/addMarket", {
            gurl: this.file,
            gname: this.goodsForm.gname,
            seller: this.goodsForm.seller,
            gprice: this.goodsForm.gprice,
            ginformation: this.goodsForm.ginformation,
          })
          .then((res) => {
            this.list = res.data;
            console.log(res);
          })
          .catch(function(err) {
            console.log(err);
          });
        this.goodsForm.gname = null;
        this.goodsForm.seller = null;
        this.goodsForm.gprice = null;
        this.goodsForm.ginformation = null;
        this.dialogFormVisible = false;
        this.$message.success("发布成功等待管理员的审核");
      }
    },
    del(li) {
      this.$http
        .post("http://localhost:8888/deleteBag", {
          gno: li,
          sid: window.sessionStorage.getItem("tokenid"),
        })
        .then((res) => {
          this.list = res.data;
          // this.getbag();
          console.log(res);
        })
        .catch(function(err) {
          console.log(err);
        });
      this.$message.success("从背包中移除成功");
    },
  },
};
</script>

<style scoped>
.card {
  width: 300px;
  height: 260px;
  margin: 10px;
}
</style>
